<template>
  <div class='wrapper'>
      <div class='back-wrapper' @click="handleBack">
        <i class='el-icon-arrow-left'></i>
        <span>返回</span>
      </div>
      <div class='btn-wrapper'>
        <el-button v-if="!playStatus"  type='primary' :class="startPluse ? 'animation' : ''"  @click="handleStart">开始</el-button>
        <el-button v-if="playStatus"  type='primary' @click="handleStart">重新开始</el-button>
        <el-button  v-if="playStatus === 'playing'"  type='warning' @click="handlePause">暂停</el-button>
        <el-button  v-if="playStatus === 'pause'" type='primary' @click="handleContinue">继续</el-button>
        <el-button  v-if="playStatus" type='danger' @click="handleCancel">取消</el-button>
      </div>
      <div class='container'>
             <!-- 背景图 -->
            <img  class='bg' :src="bgImage" alt="">

             <!-- 预加载背景图 -->
            <div v-html="preLoadImageStr"></div>

            
            
            <img  :style="{top:top + 'rem',left:left + 'rem'}" v-show="playStatus" class='little-boy' :src="littleBoySrc">
            <div v-show="showPopover" :style="{top:poverTop + 'rem',left:poverLeft + 'rem'}"  class='popover' :class="popoverPlacement">
                <p v-for="(item,index) in describe[currentStep]" :key="index">{{index + 1}}.{{item}}</p>
            </div>
            <div style="" :style="{top:(top + 6) + 'rem',left:(left + 7) + 'rem'}" v-show="showNext"  @click="handleNext" class='next-step' >{{isOver ? '重新开始' : '下一步'}}</div>
             
             <!-- 停留坐标点 -->
            <div class='steps step1'></div>
            <div class='steps step2'></div>
            <div class='steps step3'></div>
            <div class='steps step4'></div>
            <div class='steps step5'></div>
            <div class='steps step6'></div>
            <div class='steps step7'></div>
            <div class='steps step8'></div>
            <div class='steps step9'></div>
            <div class='steps step10'></div>
            <div class='steps step11'></div>
            <div class='steps step12'></div>
        </div>
  </div>
</template>

<script>
import describe from './describe'

let changeFootTimer = null //切换腿部timer
let movingTimer = null //人物移动timer
let resizeTimer = null 
let fontSize = 0 //页面字体大小
let stepPositionList = [] //每个步骤的停留坐标
let footstepStatus = 1 //切换腿部状态
let currentPosition = null //当前要运动到的坐标点
let currentDirection = {} //当前人物方向
let directionMapping = [ //每个坐标对应的人物方向图片
    {
        moving:"walk-to-right", //运动时的人物图片
        end:"to-right-hand-left", //到达坐标点后的人物图片
        placement:'left',//弹出框位置
    },
    {
        moving:"walk-to-right",
        end:"to-right-hand-left",
        placement:'left'
    },
    {
        moving:"walk-to-left",
        end:"to-left-hand-left",
        placement:'top'
    },
    {
        moving:"walk-to-right", 
        end:"to-left-hand-left",
        placement:'top'
    },
    {
        moving:"walk-to-right", 
        end:"to-left-hand-left",
        placement:'top'
    },
    {
        moving:"walk-to-right", 
        end:"to-right-hand-right",
        placement:'left'
    },
    {
        moving:"walk-to-right", 
        end:"to-left-hand-left",
        placement:'left'
    },
    {
        moving:"walk-to-right",
        end:"to-right-hand-right",
        placement:'left'
    },
    {
        moving:"walk-to-right",
        end:"to-right-hand-right",

        placement:'left'
    },
    {
        moving:"walk-to-right",
        end:"to-right-hand-right",

        placement:'left'
    },
    {
        moving:"walk-to-left", 
        end:"to-right-hand-right",
        placement:'left'
    },
    {
        moving:"walk-to-right",
        end:"to-right-hand-right",
        placement:'left'
    },
]
export default {
    data(){
        return {
            describe,
            startPluse:false,
            preLoadImageStr:'', //预加载元素
            currentStep:0,//当前步骤
            bgImage:require('@/assets/images/process/bg.svg'),
            playStatus:null, //播放状态
            littleBoySrc:null, //人物图片链接
            left:10, //人物在页面内的Left
            top:0, //人物在页面内的Top
            showPopover:false, //弹出框显示状态
            showNext:false, //下一步按钮显示状态
            popoverPlacement:'left', //弹出框方向
            poverTop:0, //弹出框在页面内的Left
            poverLeft:0, //弹出框在页面内的Top
            isOver:false //是否结束
        }
    },
    
    created(){
        this.fullscreen()
        this.setFontSize() //设置自适应
        window.addEventListener("resize",()=>{ //监听窗口变化
            clearTimeout(resizeTimer)
            resizeTimer = null
            resizeTimer = setTimeout(()=>{
                if(window.innerWidth >= 1366 && window.innerHeight >= 768){
                    this.setFontSize()
                    this.getStepPosition()
                }
                
            },300)
        })
    },
    mounted(){
        
        this.getStepPosition() 
        this.preLoadImage()
        this.pluseTimeout()
    },
    beforeDestroy(){
        clearInterval(changeFootTimer)
        changeFootTimer = null
        clearInterval(movingTimer)
        movingTimer = null
        clearTimeout(resizeTimer)
        resizeTimer = null
    },
    methods:{
        init(){
            clearInterval(changeFootTimer)
            changeFootTimer = null
            clearInterval(movingTimer)
            movingTimer = null
                
            footstepStatus = 1 
            this.currentStep = 0
            currentPosition = null
            currentDirection = directionMapping[0]

            this.startPluse = false
            this.bgImage = require('@/assets/images/process/bg.svg')
            this.showNext = false
            this.isOver = false
            this.poverLeft = 0
            this.poverTop = 0
            this.left = 10;
            this.top = 0
            this.showPopover = false
        },
        preLoadImage(){ //背景图片预加载

            const imagesArr =  require.context('@/assets/images/process').keys()
            imagesArr.forEach(item=>{
                this.preLoadImageStr += `<img src="${require('@/assets/images/process/' + item.replace('./',''))}" style="display:none"/>`
            })
            
        },
        pluseTimeout(){ //无操作3秒后开启动画
            setTimeout(()=>{
                this.startPluse = true
            },3000)
        },
        getStepPosition(){ //获取每个步骤的停留坐标
            const nodes = document.getElementsByClassName('steps')
            stepPositionList = []
            for(let i = 0;i < nodes.length;i++){
                stepPositionList.push({
                    top:nodes[i].offsetTop - 130, //减去小人高度的130px
                    left:nodes[i].offsetLeft - 25 //减去小人宽度的25px
                })
            }
        },
        setFontSize(){
            let designWidth = 1920;
            let designHeight = 1080;
            fontSize = 
                document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ? 
                (document.documentElement.clientWidth / designWidth) * 12:
                (document.documentElement.clientHeight / designHeight) * 12;
            document.querySelector('html').style.fontSize = fontSize + 'px';
        },
        handleBack(){
            this.outFullCreeen()
            this.$router.back(-1)
        },
        handleStart(){ //点击开始
            this.init()
            this.littleBoySrc = require('@/assets/images/process/' + currentDirection.moving + '-' + footstepStatus + '.svg')
            this.startAnitation()
        },
        handleNext(){ //点击下一步
            if(this.isOver){
                this.handleStart()
                return
            }
            this.bgImage = require('@/assets/images/process/bg.svg')
            this.currentStep += 1
            currentDirection = directionMapping[this.currentStep]

            this.showPopover = false
            this.showNext = false
            this.startAnitation()

        },
        handlePause(){ //暂停
            clearInterval(changeFootTimer)
            changeFootTimer = null
            clearInterval(movingTimer)
            movingTimer = null
            this.playStatus = 'pause'
        },
        handleContinue(){ //继续
            if(this.playStatus != 'pause') return
            this.startAnitation()
        },
        handleCancel(){
            this.playStatus = null
            this.init()
            this.pluseTimeout()
        },
        startAnitation(){
            this.playStatus = 'playing'
            currentPosition = stepPositionList[this.currentStep]
            this.littleBoySrc = require('@/assets/images/process/' + currentDirection.moving +  '-1.svg')

            //腿部运动
            changeFootTimer = setInterval(()=>{
                footstepStatus = footstepStatus == 1 ? 2 : 1
                this.littleBoySrc = require('@/assets/images/process/' + currentDirection.moving +  '-' + footstepStatus + '.svg')
            },300)

            //人物移动
            const littleBoy = document.getElementsByClassName('little-boy')[0]
            this.move(littleBoy,currentPosition)
        },
        move(obj,json){ //人物移动
            movingTimer = setInterval(()=>{
                var flag = true;

                for( var attr in json ){
                    var current = parseInt( this.getStyle( obj,attr ) )
                    var speed = (json[attr]-current) / 1000;

                    speed =  speed > 0 ? Math.ceil(speed) : Math.floor( speed );
                    if( json[attr] != current ){
                        flag = false;
                    }
                    this[attr] = (current + speed) / fontSize;

                }

                if( flag ){

                    this.bgImage = require("@/assets/images/process/bg" + (this.currentStep + 1) + '.svg')
                    this.littleBoySrc = require('@/assets/images/process/' + (currentDirection.end || currentDirection.moving) + '-' + footstepStatus + '.svg')
                    this.handlePause()
                    this.playStatus = 'stepEnd'
                    this.popoverPlacement = currentDirection.placement

                    if(this.currentStep === 11){ //判断是否结束
                        this.isOver = true
                    } 

                    this.showPopover = true
                    this.showNext = true

                    this.$nextTick(()=>{
                        const popover = document.getElementsByClassName("popover")[0]
                        if(this.popoverPlacement == 'left'){
                            
                            this.poverTop = this.top

                            if((this.top * fontSize) + popover.offsetHeight >= window.innerHeight){ //如果弹出框高度超出屏幕
                                this.poverTop = this.top - (((popover.offsetHeight / fontSize) / 2) - 4)
                            }

                            this.poverLeft = this.left - popover.offsetWidth / fontSize
                        }
                        if(this.popoverPlacement == 'top'){
                            this.poverTop = this.top - popover.offsetHeight / fontSize
                            this.poverLeft = this.left - (((popover.offsetWidth / fontSize) / 2 ) - 4)
                        }
                    })
                }   
            },10)
        },
        getStyle(obj,attr){
            return window.getComputedStyle(obj,false)[attr];
        },
        fullscreen() {
            let element = document.documentElement;
            var requestMethod =
                element.requestFullScreen || //W3C
                element.webkitRequestFullScreen || //Chrome等
                element.mozRequestFullScreen || //FireFox
                element.msRequestFullScreen; //IE11
            if (requestMethod) {
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                wscript.SendKeys("{F11}");
                }
            }
        },
        outFullCreeen() {
            let element = document;
            let requestMethod =
                element.cancelFullScreen ||
                element.webkitCancelFullScreen ||
                element.mozCancelFullScreen ||
                element.exitFullScreen;
            if (requestMethod) {
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                wscript.SendKeys("{F11}");
                }
            }
        },
    }
}
</script>

<style scoped lang='scss'>
    $design_width: 1920;
    $design_height: 1080;
    @function px2rem($px) {
        $design_font_size: 12;
        @return ($px/$design_font_size) + rem;
    }
    /deep/.el-button--warning:hover{
        background: #ebb563;
        border-color: #ebb563;
        color: #fff;
    }
    /deep/.el-button--danger:hover{
        background: #f78989;
        border-color: #f78989;
        color: #FFF;
    }
    .wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        background:#7ab6ce;
        width:100vw;
        height:100vh;
        min-width:1366px;
        min-height:768px;
        overflow: hidden;
        .back-wrapper{
            font-size:18px;
            color:#fff;
            cursor: pointer;
            position: absolute;
            top:30px;
            left:30px;
            font-weight: bold;
            z-index:999;
        }
        .animation{
            box-shadow: 0 0 0 0 rgba(#03A98E, .5);
            animation: pulse 1.5s infinite;
        }
        .animation:hover{
            animation:none
        }
        @-webkit-keyframes pulse {
            0% {
                transform: scale(.9);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 25px rgba(#03A98E, 0);
            }
            100% {
                transform: scale(.9);
                box-shadow: 0 0 0 0 rgba(#03A98E, 0);
            }
        }
        .little-boy,.bg{
            image-rendering: -moz-crisp-edges;
            image-rendering: -o-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor;
            -webkit-font-smooting: antialiased;
            object-fit: contain;
        }
        .little-boy{
            position: absolute;
            width:px2rem(100);
            height:px2rem(200);
            left:0;
            top:0;
        }
        .container{
            position: relative;
            display: inline-block;
            width: px2rem($design_width);
            height: px2rem($design_height);
            .bg{
                width:100%;
                height:100%;
            }
        }
        .btn-wrapper{
            position: absolute;
            right:30px;
            top:30px;
            z-index:999;
            button{
                width:80px;
            }
        }
        .next-step{
            position:absolute;
            top:0;
            left:0;
            width:px2rem(80);
            height:px2rem(30);
            background:#fff;
            border-radius:px2rem(5);
            cursor: pointer;
            padding:px2rem(5);
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:15px;
        }
        .popover{
            position: absolute;
            top:0;
            left:0;
            background:#fff;
            padding:px2rem(20);
            width:px2rem(300);
            line-height:1.8em;
            border-radius: px2rem(10);
            font-size:15px;
        }
        .popover::after{
            position: absolute;
            display: inline-block;
            content:'';
            width: 0;
            height: 0;
        }
        .top::after{
            bottom:-5px;
            left:50%;
            transform: translateX(-50%);
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #fff;
        }
        .left::after{
            top:25%;
            right:-5px;
            transform: translateY(-50%);
            border-top: 5px solid transparent;
            border-left: 5px solid #fff;
            border-bottom: 5px solid transparent;
        }
        .steps{
            width:10px;
            height:10px;
            background:#000;
            position: absolute;
            visibility: hidden;
        }
        .step1{
            top:px2rem(250);
            left:px2rem(380);
        }
        .step2{
            top:px2rem(350);
            left:px2rem(380);
        }
        .step3{
            top:px2rem(490);
            left:px2rem(330);
        }
        .step4{
            top:px2rem(680);
            left:px2rem(580);
        }
        .step5{
            top:px2rem(780);
            left:px2rem(580);
        }
        .step6{
            top:px2rem(580);
            left:px2rem(750);
        }
        .step7{
            top:px2rem(550);
            left:px2rem(1150);
        }
        .step8{
            top:px2rem(370);
            left:px2rem(1300);
        }
        .step9{
            top:px2rem(420);
            left:px2rem(1500);
        }
        .step10{
            top:px2rem(600);
            left:px2rem(1500);
        }
        .step11{
            top:px2rem(850);
            left:px2rem(1250);
        }
        .step12{
            top:px2rem(1000);
            left:px2rem(1600);
        }
    }
</style>